{% block sw_settings_country_detail %}
<sw-page class="sw-settings-country-detail">

    {% block sw_settings_country_detail_header %}
    <template #smart-bar-header>
        <h2>{{ placeholder(country, 'name', $tc('sw-settings-country.detail.textHeadline')) }}</h2>
    </template>
    {% endblock %}

    {% block sw_settings_country_detail_actions %}
    <template #smart-bar-actions>
        {% block sw_settings_country_detail_actions_abort %}
        <mt-button
            v-tooltip.bottom="{
                message: 'ESC',
                appearance: 'light'
            }"
            :disabled="isLoading"
            variant="secondary"
            size="default"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_settings_country_detail_actions_save %}
        <sw-button-process
            v-tooltip.bottom="tooltipSave"
            class="sw-settings-country-detail__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="!country || !allowSave || undefined"
            variant="primary"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('sw-settings-country.detail.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_settings_country_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    {% block sw_settings_country_detail_content %}
    <template #content>
        <sw-card-view>
            {% block sw_settings_country_detail_content_language_info %}
            <sw-language-info
                :entity-description="placeholder(country, 'name', $tc('sw-settings-country.detail.textHeadline'))"
            />
            {% endblock %}

            {% block sw_settings_country_tabs_header %}
            <sw-tabs position-identifier="sw-settings-country-detail-header">
                {% block sw_setting_country_tabs_setting %}
                <sw-tabs-item
                    v-bind="$props"
                    class="sw-settings-country__setting-tab"
                    :route="{ name: isNewCountry ? 'sw.settings.country.create.general' : 'sw.settings.country.detail.general' }"
                >
                    {{ $tc('sw-settings-country.page.generalTab') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_setting_country_tabs_state %}
                <sw-tabs-item
                    v-bind="$props"
                    class="sw-settings-country__state-tab"
                    :route="{ name: isNewCountry ? 'sw.settings.country.create.state' : 'sw.settings.country.detail.state' }"
                >
                    {{ $tc('sw-settings-country.page.stateTab') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_setting_country_tabs_address_handling %}
                <sw-tabs-item
                    v-bind="$props"
                    class="sw-settings-country__address-handling-tab"
                    :route="{ name: isNewCountry ? 'sw.settings.country.create.address-handling' : 'sw.settings.country.detail.address-handling' }"
                >
                    {{ $tc('sw-settings-country.page.addressHandlingTab') }}
                </sw-tabs-item>
                {% endblock %}

                {% block sw_setting_country_tabs_extension %}{% endblock %}
            </sw-tabs>
            {% endblock %}

            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <template v-else>
                {% block sw_settings_country_tabs_content %}
                <router-view
                    v-slot="{ Component }"
                >
                    <component
                        :is="Component"
                        :country="country"
                        :country-state-repository="countryStateRepository"
                        :is-loading="isLoading"
                        :user-config="userConfig"
                        :user-config-values="userConfigValues"
                        @modal-save="onSaveModal"
                        @update:country="onUpdateCountry"
                    />
                </router-view>
                {% endblock %}

                {% block sw_settings_country_detail_custom_field_sets %}
                <mt-card
                    v-if="showCustomFields"
                    position-identifier="sw-settings-country-detail-custom-field-sets"
                    :title="$tc('sw-settings-custom-field.general.mainMenuItemGeneral')"
                    :is-loading="isLoading"
                >
                    <sw-custom-field-set-renderer
                        :entity="country"
                        :disabled="!acl.can('country.editor')"
                        :sets="customFieldSets"
                    />
                </mt-card>
                {% endblock %}
            </template>
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
